<template>
  <div class="login-container">
    <div class="login login-anim login-anim-up">
      <div class="title">
        <img src="../assets/cc_logo.png" alt />
        <h1>瞰聆聚合推送平台</h1>
      </div>
      <el-form ref="login" :model="login" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="login.username" placeholder="请填写用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="login.password" placeholder="请填写密码" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="yanzheng">
          <el-input v-model="login.yanzheng" style="width:50%" placeholder="验证码"></el-input>
          <img :src="img" alt class="yanImg" style="float:right" title="看不清换一张" @click="nextImg" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('login')" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      img: "",      
      login: {
        username: "",
        password: "",
        yanzheng: ""
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        yanzheng: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    }
  },
  //加载调用获取验证码的方法
  created: function() {
    this.getYanImg();
  },
  methods: {
    submitForm(login) {
      this.$refs[login].validate(valid => {
        if (valid) {
          //定义登录接口参数
          var loginInfo = {
            account: this.login.username,
            password: this.login.password,
            captcha: this.login.yanzheng,
            captchaToken: window.localStorage.getItem("token")
          }
          this.$http
            .post(
              "emp/login",
              JSON.stringify(loginInfo),
              //设置 post 请求数据格式
              { emulateJSON: true }
            )
            .then(result => {
              var signal = result.body.code;
              var msg = result.body.message;
              if (signal == "105") {
                this.$message.success({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 300
                })
                //存储用户名信息
                window.localStorage.setItem(
                  "username",
                  this.login.username
                )
                setTimeout(() => {
                  this.$router.push({
                    path: "/main/android"
                  })
                }, 1200);
              } else if (signal == "106") {
                this.$message.error({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 300
                })
              } else if (signal == "107") {
                this.$message.error({
                  message: msg,
                  duration: 1000,
                  center: true,
                  offset: 300
                })
              } else {
                // 失败了
                this.$message.error({
                  message: "失败",
                  duration: 1000,
                  center: true,
                  offset: 300
                })       
              }
            })
        } else {
          console.log("error submit!!");
          return false;
        }
      })
    },
    //获取验证码
    getYanImg: function() {
      this.$http.get("captcha").then(result => {
        if (result.body.code == "1001") {
          //console.log(result.body.message)
          this.img = "data:image/png;base64," + result.body.data.img
          
          this.$store.commit("settoken", result.body.data.captchaToken)
          //console.log(result.body.data.captchaToken)
          //设置本地存储,因为vuex中数据刷新会丢失
          window.localStorage.setItem("token", result.body.data.captchaToken)
        } else {
        }
      })
    },
    //刷新验证码
    nextImg: function() {
      this.getYanImg()
    }
  }
}
</script>
<style>
html {
  width: 100%;
  height: 100%;
}
.login-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: url(../../src/assets/bg.jpg);
  background-size: cover;
}
.login-container .title {
  position: absolute;
  left: 70px;
  top: -50px;
}
.login-container .title > h1 {
  font-family: "幼圆";
  letter-spacing: 0.3em;
  color: #421919;
}
.title > img {
  position: absolute;
  width: 40px;
  left: -55px;
}
.login {
  margin: 200px auto 0 auto;
  max-width: 420px;
  padding: 40px 40px 20px 40px;
  background-color:rgba(255,255,255,.7  );
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0px 0px 15px #ccc;
}
.login .el-input__inner {
  background-color:rgba(255,255,255,.7  );

}
.login-anim {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
.login-anim-up {
  animation-name: login-up;
}
@keyframes login-up {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0.3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
</style>
